<template>
    <ConTent>
        <div class="row justify-content-md-center">
            <div class="col-3">
                <form @submit.prevent="login">
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">用户名</label>
                        <input v-model="username" type="text" class="form-control" id="exampleFormControlInput1"
                            placeholder="用户名">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlInput2" class="form-label">密码</label>
                        <input v-model="password" type="password" class="form-control" id="exampleFormControlInput2"
                            placeholder="密码">
                    </div>
                    <div style="color:red;">{{ error_message }}</div>
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
        </div>
    </ConTent>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
import router from '@/router/index';
import ConTent from '@/components/ConTent.vue';
export default {
    name: 'LoginView',
    components: {
        ConTent,
    },
    setup() {
        let username = ref("");
        let password = ref("");
        let error_message = ref("");
        let store = useStore();

        let jwt = localStorage.getItem("token");
        if (jwt) {
            store.commit("update_token", jwt);
            store.dispatch("getinfo", {
                success(resp) {
                    if (resp.error_message === "success") {
                        store.dispatch("getfavoriteinfo");
                        store.dispatch("getshopcartsinfo");
                        store.dispatch("getproductinfo");
                        store.dispatch("getorderinfo");
                        router.push({ name: "home" });
                    }
                },
                error() { }
            });
        }

        const login = () => {
            error_message.value = "";
            store.dispatch("login", {
                username: username.value,
                password: password.value,
                success() {
                    store.dispatch("getinfo", {
                        success(resp) {
                            if (resp.error_message === "success") {
                                store.dispatch("getfavoriteinfo");
                                store.dispatch("getshopcartsinfo");
                                store.dispatch("getproductinfo");
                                store.dispatch("getorderinfo");
                                //store.commit("insert_favoriteinfo");
                                router.push({ name: "home" });
                            }
                        },
                        error() { }
                    });
                },
                error() {
                    error_message.value = "用户名或密码错误";
                }
            })
        };


        // console.log(store.state.is_login);
        return { username, password, error_message, login };
    }
}
</script>

<style scoped>
button {
    width: 100%;
}
</style>